<template>
    <el-header class="header-container">
        <a class="logo">
            <img src="@/assets/logo.png" alt="logo" />
            <b>温馨养老院</b>
        </a>
        <el-menu
            :default-active="activeIndex"
            active-text-color="#4a7b26"
            class="header-menu"
            mode="horizontal"
            @select="handleSelect">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">关于我们</el-menu-item>
            <el-menu-item index="3">服务项目</el-menu-item>
            <el-menu-item index="4">留言板</el-menu-item>
        </el-menu>
        <el-dropdown>
            <span class="header-dropdown">
                <el-avatar src="/src/assets/images/aa1bab095722d25cacdcd56111a8e272.png" />
                <span>张先生</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="go('/system/personal-info')">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="go('/system/health-records')">健康档案</el-dropdown-item>
                    <el-dropdown-item @click="go('/system/medical-medication')">病历与用药</el-dropdown-item>
                    <el-dropdown-item @click="go('/system/visitor-records')">访客记录</el-dropdown-item>
                    <el-dropdown-item @click="go('/system/outing-records')">外出记录</el-dropdown-item>
                    <el-dropdown-item @click="go('/system/family-relations')">家属关系</el-dropdown-item>
                    <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-header>
</template>

<script setup>
    import { ref } from "vue";
    import { useRouter } from "vue-router";

    const router = useRouter();
    const go = (path) => router.push(path);
    const logout = () => { localStorage.removeItem('userInfo'); router.push('/login'); };

    const activeIndex = ref("1");
    const handleSelect = (key, keyPath) => {
        console.log(key, keyPath);
    };
</script>

<style scoped>
    .header-dropdown {
        display: inline-flex;
        align-items: center;
    }
    .header-container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .logo {
            color: #4a7b26;
        }
    }
    .header-menu {
        width: 80%;
        display: flex;
        justify-content: center;
    }
</style>
